<template>
	<view>
		<iceTopBtn @fontSizeConfig="show=true" @QAInfo="show2=true" />
		<iceQType :questionInfoData="questionInfoData" />
		<view class="problem" :style="style">
			<iceQuestion :changeQ="changeQ" @questionInfo="questionInfo" />
		</view>
		<icePreNext :changeQ="changeQ" :questionInfoData="questionInfoData" class="bottom" @changeQ="e=> changeQ = e"
			@submit="show2=true" />
		<icePopup :show="show" @iceClose="show=false">
			<fontSizeConfig class="iceGap" :fontSize="value" @fromChild="fromChild" />
		</icePopup>
		<icePopup :show="show2" @iceClose="show2=false">
			<iceJumpQ @jumpQ="e=> changeQ = e" :questionInfoData="questionInfoData" @iceClose="show2=false" />
		</icePopup>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import fontSizeConfig from '@/components/widget/fontSizeConfig/index.vue'
	import icePopup from '@/components/onceMore/icePopup.vue'
	import iceTopBtn from '@/components/cpn/iceTopBtn.vue'
	import iceJumpQ from '@/components/cpn/iceJumpQ.vue'
	import iceQType from '@/components/cpn/iceQType.vue'
	import iceQuestion from '@/components/cpn/iceQuestion/index.vue'
	import icePreNext from '@/components/cpn/icePreNext.vue'
	const value = ref(16)
	const show = ref(false)
	const show2 = ref(false)
	const changeQ = ref(0)
	const style = reactive({
		fontSize: '16px'
	})
	const questionInfoData = ref([])
	const questionInfo = (e) => {
		questionInfoData.value = e
	}
	const fromChild = (e) => {
		style.fontSize = `${e}px`
		value.value = e
	}
	const second = ref(6)
	const setIntervalID = ref(null)
</script>
<style scoped>
	.problem {
		margin-top: 20px;
		width: 99%;
		height: 52vh;
		/* border:1px red solid; */
		overflow: hidden;
	}

	.iceGap {
		margin: 40px 0 90px 0;
	}

	.bottom {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		/* z-index: 99999; */
	}
</style>